<template>
    <div class="game-guide">
        <div class="gg-main">
            <div class="ggm-one">
                <div class="ggmo-left">
                    <p class="ggmol-one">
                        <span>我的账户</span>
                        <span>
<!--              <i class="el-icon-setting"></i>-->
<!--              设置-->
            </span>
                    </p>

                    <div class="ggmol-four">
<!--                    <p class="ggmol-two">账户可用余额（元）</p>-->
<!--                    <p class="ggmol-there">{{account_balance}}</p>-->
                        <p>
                            <span>账户可用余额(元)</span>
                            <span style="font-size: 20px;font-weight: 500;color: #333333;">{{account_balance}}</span>
                        </p>
                        <p>
                            <span>抵扣额度(元)</span>
                            <span style="font-size: 16px;font-weight: 500;color: #333333;">{{kaipiao}}</span>
                        </p>
                    </div>

                    <div class="ggmol-four">
                        <p>
                            <span>月结额度（元）</span>
                            <span>{{today_consumer}}</span>
                        </p>
                        <p>
                            <span>月结额度剩余（元）</span>
                            <span>{{month_lines}}</span>
                        </p>
					<!-- 	<p>
						    <span>月结负债（元）</span>
						    <span>{{debtLimit}}</span>
						</p> -->
                    </div>
                    <button class="ggmol-five" @click="drawer = true">账户充值</button>
                </div>
                <div class="ggmo-right">
                    <div class="ggmor-one">
                        <p
                                @click="handleCurrent(1)"
                                :class="current === 1 ? 'active' : ''"
                        >今日明细</p>
                        <p
                                @click="handleCurrent(2)"
                                :class="current === 2 ? 'active' : ''"
                        >昨日明细</p>
                    </div>
                    <div class="ggmor-two">
                        <p>
                            <span>消费金额（元）</span>
                            <span>{{this.SumAmount}}</span>
                        </p>
                        <p>
                            <span>成交笔数</span>
                            <span>{{this.transactions}}</span>
                        </p>
                        <p>
                            <span>退款金额（元）</span>
                            <span>{{this.RefundAmount}}</span>
                        </p>
                    </div>
                    <p class="ggmor-there">购买记录</p>
                    <div class="ggmor-four">
                        <p>
                            <span>{{timeone}}</span>
                            <span>{{timetwo}}</span>
                        </p>
                        <p>
                            <span>{{orderid1}}</span>
                            <span>{{orderid2}}</span>
                        </p>
                        <p>
                            <span>{{financialDetailsone}}</span>
                            <span>{{financialDetailstwo}}</span>
                        </p>
                        <p>
                            <span>{{four}}</span>
                            <span>{{six}}</span>
                        </p>
                        <p>
                            <span>{{returnMoneyone}}</span>
                            <span>{{returnMoneytwo}}</span>
                        </p>
                    </div>

					<div style="align-self: center;margin-top: 20px;font-size: 14px;color: #2d2d2d;font-weight: bold;text-align: center">
						<a @click="into_mywator"><p>点击查看更多流水 》</p></a>
					</div>
                </div>

            </div>
            <div class="ggm-two">
      <!--          <el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" @onchange="querydataBytime()">
                </el-date-picker> -->
            </div>
            <div class="ggm-there">
          <!--     <div
                        id="chartLineBox"
                        style="width: 100%;height: 300px;"
                ></div> -->
				<el-table
				        :data="tableData"
				        style="width: 100%"
				        :header-cell-style="{ background: '#333333', color: ' #F9D532' }"

				>
				    <el-table-column
				            prop="id"
				           type="index"
				            label="序号"
				    >
				    </el-table-column>
				              <el-table-column
				            prop="billName"
				            label="账单名称"
				    >
				    </el-table-column>
				    <el-table-column
				            prop="billMoney"
				            label="账单金额"
				    >
				    </el-table-column>

				    <el-table-column
				            prop="createTimeString"
				            label="生成时间"
				    >
				    </el-table-column>

		             <el-table-column
				            prop="statusString"
				            label="状态"
				    >
				    </el-table-column>


				    <el-table-column

				            label="操作"
				    >
				        <template slot-scope="props">
				            <el-button v-if="props.row.billType==0"
				                    @click="seeMonthordertable(props.row.billId)"
				                    type="text"
				                    size="small"
				                    :style="{color: '#C29C0F'}"
				            >查看账单明细
				            </el-button>



							<el-button v-if="props.row.billType!=0"
							        @click="downloadfujian(props.row.fujian)"
							        type="text"
							        size="small"
							        :style="{color: '#C29C0F'}"
							>下载附件
							</el-button>

							<el-button
							 v-if="props.row.status!=1"
							        @click="openquxiao(props.row.billId,props.row.userId,props.row.billMoney)"
							        type="text"
							        size="small"
							        :style="{color: '#C29C0F'}"
							>余额支付
							</el-button>
				        </template>
				    </el-table-column>
				</el-table>
            </div>

			<div style="  text-align: center;
                margin: 35px 0 0;">
			    <el-pagination
			            background
			            layout="prev, pager, next"
			            :total="pageDetail.total"
			            :page-size="5"
			            @next-click="currentPage+=1,handleCurrentChange"
			            @prev-click="currentPage-=1,handleCurrentChange"
			            @current-change="handleCurrentChange"
			    >
			    </el-pagination>
			</div>
        </div>

        <div>
			          <!--取消订单的弹框-->
			          <el-dialog
			                  title="提示"
			                  :visible.sync="yuezhifuxianshi"
			                  width="30%"
			          >
			              <span>确定支付吗？</span>
			              <span slot="footer" class="dialog-footer">
			  <el-button @click="yuezhifuxianshi = false">取 消</el-button>
			  <el-button type="primary" @click="yuezhifuxianshi = false,zhifu()()">确 定</el-button>
			</span>
			          </el-dialog>


			<el-drawer
			  title="我是标题"
			  :visible.sync="Monthdrawer"
			  :with-header="false"
			  style="500px">
			 <el-table
			         :data="smalltableData"
			         style="width: 100%"
			         :header-cell-style="{ background: '#333333', color: ' #F9D532' }"

			 >
			     <el-table-column
			             prop="id"
			            type="index"
			             label="序号"
			     >
			     </el-table-column>
			               <el-table-column
			             prop="orderSn"
			             label="订单编号"
			     >
			     </el-table-column>

				 <el-table-column
				         prop="orderTypeString"
				         label="订单类型"
				 >
				 </el-table-column>
			     <el-table-column
			             prop="money"
			             label="订单月结花费金额"
			     >
			     </el-table-column>

			     <el-table-column

			             prop="createTimeString"
			             label="生成时间"
			     >
			     </el-table-column>


			     <el-table-column
			             fixed="right"
			             label="操作"
			     >
			         <template slot-scope="props">
			             <el-button
			                     @click="seeMonthordertable(props.row.billId),Monthdrawer=true"
			                     type="text"
			                     size="small"
			                     :style="{color: '#C29C0F'}"
			             >查看账单明细
			             </el-button>
			         </template>
			     </el-table-column>
			 </el-table>
			</el-drawer>


            <!--作用于面料订单的查看界面-->
            <el-drawer
                    class="el-drawer__body"
                    title="详细"
                    size="30%"
                    :with-header="false"
                    :visible.sync="drawer"
                    :direction="direction">
                <div style="height: 30px;line-height: 30px;left: 10px;padding-left: 26px;margin-top: 16px;">
                    <i class="el-icon-s-order" style="font-size: 16px;">账户充值</i>
                </div>

                <div style="margin-top: 12px;"><span style="color: #ADADAD;font-size: 14px;margin-left: 26px;">当前账户可用余额（元）</span></div>
                <div style="margin-top: 12px;"><span style="color: #333333;font-size: 18px;margin-left: 26px;">{{account_balance}}</span></div>
                <div style="margin-top: 36px;"><span style="color: #333333;font-size: 14px;margin-left: 26px;">充值方式</span></div>


                <div style="margin-top: 18px;padding-left: 26px;">
                    <el-radio v-model="radio1" label="1" border @change="change_redio(radio1)">支付宝支付</el-radio>
                    <el-radio v-model="radio1" label="2" border @change="change_redio(radio1)">微信支付</el-radio>
                </div>

				<div style="margin-top: 10px;height: 180px;width:100%;" v-show="is_wxshow=='1'" v-loading="loading">
					<div style="margin-left: 140px">
						<p style="font-size: 14px">微信在线支付，请扫下面二维码支付</p>
					</div>
					<div style="width: 146px;height: 146px;background-color: #adacac;margin-left: 160px" id="qrCode"
						 ref="qrCodeDiv"></div>
				</div>

                <div style="margin-top: 36px;"><span style="color: #333333;font-size: 14px;margin-left: 26px;">充值金额</span></div>
                <div style="margin-top: 18px;padding-right: 26px;padding-right: 130px;"><el-input v-model="input_money" placeholder="请输入你要充值的金额" style="color: #ADADAD;font-size: 14px;margin-left: 26px;"></el-input></div>
                <div style="margin-top: 8px;"><span style="color: #ADADAD;font-size: 5px;margin-left: 26px;">充值规则：最小可充值100元</span></div>

                <el-button type="primary" @click="onSubmitMoney" style="background: #303030;margin-left: 26px;margin-top: 36px;"><span style="font-size: 14px;color: #FFE56D">确认充值</span></el-button>
            </el-drawer>

			<div class="pay" v-loading="loading" v-show="is_show=='1'">
			</div>
        </div>

    </div>



</template>

<script>
    import echarts from "echarts";
    import { deleteAction, postAction, getAction,getFileAccessHttpUrl } from '@/api/manage'
    import Qs from "qs";
	import QRCode from 'qrcodejs2';

    export default {
        data() {
            return {
				wx_order_no: '',//微信订单号
				intjishi: '',
				is_wxshow: 0,
				is_wx: 0,
				is_show:0,
				loading:false,
				userId:'',
				yuezhifuxianshi:false,
				debtLimit:'',
				Monthdrawer:false,
				currentPage:1,
				 pageDetail: {},
				tableData: [

				],

				smalltableData: [

				],
				billMoney:'',
                financialDetailsone: '',
                financialDetailstwo: '',
                returnMoneyone: '',
                returnMoneytwo: '',
                SumAmount: '',
                RefundAmount: '',
                transactions: '',
                timeone: '',
                timetwo: '',
                orderid1:'',
                orderid2:'',
                token: localStorage.getItem("token"),
                current: 1,
                one: "0.00",
                two: "0.00",
                three: "",
                four: "",
                five: "",
                six: "",
                value1: "",
                account_balance: '0.00',//我的余额
                today_consumer: '0.00',
                month_lines: '0.00',
                kaipiao: '0.00',
                daytime:[],//日期
                costNum:[],//消费笔数
                costMoey:[],//消费金额
                drawer: false,
                direction: 'rtl',
                input_money:'',//输入充值的钱
                radio1: '1',
                radio2:'2',
				billId:'',
                mybalance:'0.00',//我的余额
                url: {
					list:'/WebMonthStatement/getWebMonthStatement',
					smalllist:'/WebMonthStatement/getsmallWebMonthStatement',
                    show_data_token: '/user/interface/query_userInfoBytoken',
                    show_waterdata: '/logic/interface/query_busines_waterInfo',
                    countdata: '/logic/interface/count_order_tableData',
					zhifu:'/WebMonthStatement/fuzhaizhifu'
                },
            };
        },
        created() {
			this.getOrder();
            this.show_userinfo();//查询个人信息
            this.current = 1;
            this.show_water_info(1);//查询流水记录
        },
		destroyed() {
			window.clearInterval(this.intjishi);
		},
        methods: {
			/**
			 * 生成二维码
			 */
			bindQRCode(url) {
				new QRCode(this.$refs.qrCodeDiv, {
					text: url,
					width: 180,
					height: 180,
					colorDark: "#333333", //二维码颜色
					colorLight: "#ffffff", //二维码背景色
					correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
				})
			},
			change_redio(is_show) {
				if (is_show == '1') {
					this.is_wxshow = 0;
				} else if (is_show == '2') {
					if (this.is_wx == 0) {
						this.is_wxshow = 0;
					} else {
						this.is_wxshow = 1;
					}
				} else {
					this.is_wxshow = 0;
				}
			},
			into_mywator(){//跳转我的流水
				this.$router.push({path:'/my-statement'});
			},
			// 打开取消顶订单的弹框
			openquxiao(billId,userId,billMoney) {
			    this.yuezhifuxianshi = true;
			    this.billId = billId;
			    this.userId = userId;
				  this.billMoney = billMoney;
			},
			zhifu(){

				getAction(domain.publicUrl + this.url.zhifu, {
				    'billId': this.billId ,
					'userId':this.userId,
					'billMoney':this.billMoney,
					'accountBalance':this.account_balance
				}).then(res => {
					if(res.data.code==0){
						 this.$message.success(res.data.msg);
					      	this.getOrder();
					      	this.show_userinfo();//查询个人信息
					}else{
						 this.$message.success(res.data.msg);
					}

				})

				},

			downloadfujian(fujian){
				if(fujian==""||fujian==null){
					 this.$message.success("暂无附件");
					 return;
				}
				let url = getFileAccessHttpUrl(fujian)
				window.open(url);
			},
			seeMonthordertable(id){
				  this.$router.push({path:'/smallMonthList',query: {billid:id}});

				// getAction(domain.publicUrl + this.url.smalllist, {
				//     'billid': id
				// }).then(res => {
				//     this.smalltableData = res.data.data.records
				//      // this.pageDetail = res.data.data
				// })

			},
			// 分页触发请求
			handleCurrentChange(val) {
			    this.currentPage = val
			    this.getOrder();
			},
			getOrder() {
			    getAction(domain.publicUrl + this.url.list, {
			        'token': this.token ,
					'pageNo':this.currentPage
			    }).then(res => {
			        this.tableData = res.data.data.records
			         this.pageDetail = res.data.data
			    })
			},
            show_userinfo() {
                // let autohor_token = localStorage.getItem("token");
                let params = {token:this.token};
                postAction(domain.publicUrl+this.url.show_data_token,Qs.stringify(params)).then(res=>{
                    let result = res.data;
                    console.log(result)
                    if(result.code==0){
                        this.account_balance = result.data.accountBalance;
                        this.today_consumer = result.data.monthLines;
                        this.month_lines = result.data.remainingLimit;
                        this.kaipiao = result.data.deductionLimit;
						this.debtLimit   = result.data.debtLimit;
                    }else{
                        this.$message.error(result.msg)
                    }
                })
            },
            show_water_info(num){
                var params2 = {token:this.token,type:num};
                postAction(domain.publicUrl + this.url.show_waterdata, Qs.stringify(params2)).then((res) => {
                    var result = res.data;
                    console.log(res.data)
                    if (result.code==0) {
                        this.timeone = "";
                        this.orderid1 = "";
                        this.four = "";
                        this.returnMoneyone = "";
                        this.financialDetailsone = "";
                        this.timetwo = "";
                        this.orderid2 = "";
                        this.six = "";
                        this.returnMoneytwo = "";
                        this.financialDetailstwo = "暂无记录";

                        this.transactions = result.tading_num;   //成交笔数
                        this.SumAmount = result.sumorder_money;   //成交金额
                        this.RefundAmount = result.sumtuikuan_money;
                        //这里是取到的数组，但是还没有渲染到页面上面去
                        if(result.data != undefined && result.data.length<=1){
                            this.timeone = result.data[0].createTime;
                            this.orderid1 = result.data[0].orderSn+"";
                            this.four = result.data[0].costMoney;
                            this.returnMoneyone = result.data[0].returnMoney;
                            this.financialDetailsone = result.data[0].yewuDeatil;
                        }else if(result.data != undefined && result.data.length>1){
                            this.timeone = result.data[0].createTime;
                            this.orderid1 = result.data[0].id+"";
                            this.four = result.data[0].costMoney;
                            this.returnMoneyone = result.data[0].returnMoney;
                            this.financialDetailsone = result.data[0].yewuDeatil;

                            this.timetwo = result.data[1].createTime;
                            this.orderid2 = result.data[1].orderSn+"";
                            this.six = result.data[1].costMoney;
                            this.returnMoneytwo = result.data[1].returnMoney;
                            this.financialDetailstwo = result.data[1].yewuDeatil;
                        }
                    } else {
                        this.$message.error(result.msg)
                    }
                });
            },
            handleCurrent(num) {
                if (num == 1) {
                    this.current = 1;
                    this.show_water_info(1);
                } else {
                    this.current = 2;
                    this.show_water_info(2);
                }
            },
            onSubmitMoney(){
				let money = this.input_money*1;
				if(this.radio1=='' || this.radio1==null){
					this.$notify.warning({
						title: "提示",
						message: '请选择充值方式',
						duration: 1500,
					});
					return;
				}
				else if(this.input_money==null || this.input_money==''){
					this.$notify.warning({
						title: "提示",
						message: '请输入充值金额',
						duration: 1500,
					});
					return;
				}
				else if(money<100){
					this.$notify.warning({
						title: "提示",
						message: '充值金额不能小于100',
						duration: 1500,
					});
					return;
				}
				else {
					if(this.radio1=='1'){//支付宝充值
						this.loading = true;
						this.radio1='1';
						this.is_wx = 0;
						this.is_wxshow = 0;
						let autohor_token = localStorage.getItem("token");
						var params = {token:autohor_token,orderType:"3",applyMethod:"1",orderSn:this.input_money};
						postAction(domain.publicUrl+"/ali/pay/order/create",Qs.stringify(params)).then(res=>{
							var result = res.data;
							if(result.code=="1"){
								this.drawer = false;
								this.is_show=1;
								this.loading = false;
								document.write(result.data.body)
							}else{
								this.is_show=0;
								this.$message.error(result.msg)
								this.loading = false;
							}
						})
					}else {
						this.radio1='2';
						this.loading = true;
						this.wx_order_no = '';
						let autohor_token = localStorage.getItem("token");
						var params = {token: autohor_token, orderType: "3", applyMethod: "2", orderSn: this.input_money};
						postAction(domain.publicUrl + "/WxPay/wx/pay/order_create", Qs.stringify(params)).then(res => {
							var result = res.data;
							if (result.data.resultCode == "SUCCESS") {
								this.is_show = 0;
								this.is_wxshow = 1;
								this.is_wx = 1;
								this.$nextTick(function () {
									this.bindQRCode(result.data.codeURL);
								})
								this.loading = false;
								this.wx_order_no = result.msg;
								this.intjishi = setInterval(() => {
									this.wx_pay_status()
								}, 1000);
							} else {
								this.is_show = 0;
								this.is_wxshow = 0;
								this.$message.error("微信支付失败，请重新发起订单支付")
								this.loading = false;
							}
						})
						// //微信充值
						// this.$notify.warning({
						// 	title: "提示",
						// 	message: '微信正在努力申请中...',
						// 	duration: 1500,
						// });
					}
				}
            },

			//微信支付状态判断
			wx_pay_status() {
				getAction(domain.publicUrl + "/logic/interface/query_wxStatusDetailBywxSn", {
					'wx_out_orderSn': this.wx_order_no
				}).then(res => {
					let result = res.data;
					if (result.code == 0) {
						if (result.data.status == 2) {//已支付
							//跳转成功界面
							window.clearInterval(this.intjishi);//销毁定时器
							this.$message.success("微信充值成功！")
							this.drawer = false;
							this.show_userinfo();//刷新用户信息
						} else if (result.data.status == 1) {//取消支付
							window.clearInterval(this.intjishi);//销毁定时器
							this.$message.error("你已取消了订单支付")
						} else {//未支付

						}
					} else {
						this.$message.error("正在支付中")
					}
				})
			},

            //改变时间查询
            querydataBytime() {
                console.log("youilknll");
               alert("===="+this.value1);
            },
            drawLine(id) {
                var params = {token:this.token};
                postAction(domain.publicUrl+this.url.countdata,Qs.stringify(params)).then(res=>{
                    var result = res.data;
                    console.log(res.data)
                    if(result.code==0){
                        console.log(result.data1)
                        this.daytime=result.data1;
                        this.costNum=result.data2;
                        this.costMoey=result.data3;
                        // alert(this.daytime)
                        this.charts = echarts.init(document.getElementById(id))
                        this.charts.setOption({
                            // 指定图表的配置项和数据
                            tooltip: {
                                //设置tip提示
                                trigger: "axis",
                            },
                            legend: {
                                //设置区分（哪条线属于什么）
                                data: ["笔数", "消费金额"],
                            },
                            color: ["#8AE09F", "#FA6F53"], //设置区分（每条线是什么颜色，和 legend 一一对应）
                            xAxis: {
                                //设置x轴
                                type: "category",
                                boundaryGap: false, //坐标轴两边不留白
                                // data: this.daytime,
                                data: this.daytime,
                                //name: "DATE", //X轴 name
                                nameTextStyle: {
                                    //坐标轴名称的文字样式
                                    color: "#FA6F53",
                                    fontSize: 16,
                                    padding: [0, 0, 0, 20],
                                },
                                axisLine: {
                                    //坐标轴轴线相关设置。
                                    /* lineStyle: {
                                      color: "#FA6F53",
                                    }, */
                                },
                            },
                            yAxis: {
                                //name: "SALES VOLUME",
                                nameTextStyle: {
                                    color: "#FA6F53",
                                    fontSize: 16,
                                    padding: [0, 0, 10, 0],
                                },
                                /* axisLine: {
                                  lineStyle: {
                                    color: "#FA6F53",
                                  },
                                }, */
                                type: "value",
                            },
                            series: [
                                {
                                    name: "笔数",
                                    data: this.costNum,
                                    // data: [1,2,3],
                                    type: "line", // 类型为折线图
                                    lineStyle: {
                                        // 线条样式 => 必须使用normal属性
                                        normal: {
                                            color: "#8AE09F",
                                        },
                                    },
                                },
                                {
                                    name: "消费金额",
                                    data: this.costMoey,
                                    // data: [1,2,3],
                                    type: "line",
                                    lineStyle: {
                                        normal: {
                                            color: "#FA6F53",
                                        },
                                    },
                                },
                            ],
                        });
                    }else{
                        this.$message.error(result.msg)
                    }
                })
                // alert(this.daytime)
            }
        },
        mounted() {
            this.$nextTick(function() {
                this.drawLine('chartLineBox')
            })
            // 使用刚指定的配置项和数据显示图表。
            // this.chartLine.setOption(option);
        },
    };
</script>

<style lang="scss" scoped>
    .game-guide {
        box-sizing: border-box;
        padding: 30px 90px;

        .gg-main {
            background: #fff;
            box-sizing: border-box;
            padding: 20px 40px 30px;

            .ggm-one {
                display: flex;

                .ggmo-left {
                    width: 345px;
                    background: #f9f9f9;
                    border-radius: 3px;
                    margin-right: 30px;
                    box-sizing: border-box;
                    padding: 30px 20px;

                    .ggmol-one {
                        display: flex;
                        justify-content: space-between;

                        span:nth-child(1) {
                            font-size: 18px;
                            font-weight: 600;
                            color: #333333;
                        }
                    }

                    .ggmol-two {
                        font-size: 14px;
                        font-weight: 300;
                        color: #9b9b9b;
                        margin: 10px 0 15px 0;
                    }

                    .ggmol-there {
                        font-size: 25px;
                        font-weight: 500;
                        color: #333333;
                    }

                    .ggmol-four {
                        display: flex;
                        margin-bottom: 20px;

                        p {
                            margin-right: 40px;

                            span:nth-child(1) {
                                display: block;
                                font-size: 14px;
                                font-weight: 400;
                                color: #aeaeae;
                                margin: 20px 0 10px 0;
                            }

                            span:nth-child(2) {
                                font-size: 16px;
                                font-weight: 500;
                                color: #333333;
                            }
                        }
                    }

                    .ggmol-five {
                        width: 100%;
                        height: 38px;
                        background: #f9d532;
                        box-shadow: 0px 4px 4px 0px rgba(223, 190, 40, 0.48);
                        font-size: 16px;
                        font-weight: 600;
                        color: #333333;
                        cursor: pointer;
                    }
                }

                .ggmo-right {
                    flex: 1;
                    background: #f9f9f9;
                    box-sizing: border-box;
                    padding: 30px 20px;
                    border-radius: 3px;

                    .ggmor-one {
                        display: flex;
                        margin-bottom: 20px;

                        p {
                            width: 150px;
                            height: 48px;
                            line-height: 48px;
                            text-align: center;
                            background: #fff;
                            border-radius: 3px;
                            font-size: 16px;
                            color: #333333;
                            cursor: pointer;
                        }

                        .active {
                            background: #333333;
                            color: #f9d532;
                        }
                    }

                    .ggmor-two {
                        display: flex;
                        justify-content: space-between;

                        p {
                            span {
                                display: block;
                            }

                            span:nth-child(1) {
                                font-size: 14px;
                                font-weight: 600;
                                color: #5a5a5a;
                                margin-bottom: 10px;
                            }

                            span:nth-child(2) {
                                font-size: 24px;
                                font-weight: 400;
                                color: #333333;
                            }
                        }
                    }

                    .ggmor-there {
                        font-size: 16px;
                        font-weight: 600;
                        color: #464646;
                        margin-top: 20px;
                    }

                    .ggmor-four {
                        display: flex;
                        justify-content: space-between;

                        p {
                            span {
                                display: block;
                                font-size: 14px;
                                font-weight: 400;
                                color: #333333;
                                margin-top: 20px;
                            }
                        }
                    }
                }
            }

            .ggm-two {
                margin: 25px 0;
            }

            .el-drawer__body {
                overflow-y: auto;
            }
        }
    }
</style>
